
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="div1" class="level1" >

    <menu-list :msg1="msg1" :msg2="msg2" :msg3="msg3" :msg4="msg4"></menu-list>

</div>

<script type="text/javascript">
    /*
      组件之间的参数传递：
            遍历多种数据类型
    */
    Vue.component("menu-list", {
        props: ['msg1','msg2','msg3','msg4'],

        template: `<div>
          <div>{{msg1}}</div>
          <div>{{msg2+100}}</div>
          <ul>
            <li v-for="(item,index) in msg3">{{item}}</li>
          </ul>
          <span>{{msg4.name}}</span>
          <span>{{msg4.age}}</span>
        </div>`
    });


    const vm = new Vue({
        el: '#div1',
        data: {
            msg1: 'hello',
            msg2: 123,
            msg3: ['aa', 'bb', 'cc'],
            msg4: {
                name: 'zhangsan',
                age: 22,
            }



        }
    });
</script>
</body>
</html>
